<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <link type="text/css" rel="stylesheet" href="../../easyui-1.11.3/themes/bootstrap/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../easyui-1.11.3/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../extend/themes/icon.css">
        <script type="text/javascript" src="../jquery.min.js"></script>
        <script type="text/javascript" src="../../easyui-1.11.3/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../../easyui-1.11.3/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="../jquery.easyui.extensions.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#tt').tree({
                    lines: true,
                    fit: true,
                    method: 'get',
                    url: 'left_menu_data.json',
                    onClick: function(node){
                        if(node.attributes && node.attributes.url){
                            $('#ifrm').attr('src', node.attributes.url);
                        }
                    },
                    customAttr: {
                        expandOnNodeClick: true
                    }
                }).tree('followCustomHandle');
            });

            function doExpand(){
                $('#tt').tree('expandAll');
            }

            function doCollapse(){
                $('#tt').tree('collapseAll');
            }
        </script>
    </head>
    <body class="easyui-layout">
        <div data-options="region:'west',split:true,hideCollapsedContent:false,collapsed:true, minWidth: 150, maxWidth:300" title="菜单"> 
            <div class="easyui-panel" data-options="fit: true, border: false">
                <div class="easyui-layout" data-options="fit: true">
                    <div data-options="region: 'north', border: false">
                        <div class="datagrid-toolbar" style="text-align: right">
                            <a href="javascript: void(0)" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-expand'" onclick="doExpand()">展开</a>
                            <a href="javascript: void(0)" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-collapse'" onclick="doCollapse()">收缩</a>
                        </div>
                    </div>
                    <div data-options="region: 'center', border: false">
                        <ul id="tt"></ul>
                    </div>
                </div>
            </div>
        </div>
        <div data-options="region:'south', minHeight: 30, maxHeight: 30">
            <div style="text-align: center; padding-top: 5px;">
                作者：爱看书不识字
            </div>
        </div>
        <div data-options="region:'center'">
            <iframe id="ifrm" src="" frameborder="0" height="99%" width="99.9%" marginheight="0" marginwidth="0" style="margin: 0px;"></iframe>
        </div>
    </body>
</html>